// Imports
@import "reset.less";

// Variables
@editorBackground: #484a63;
@bodyBackground: #f2f3f5;
@editorWidth: 40%;

* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

// Functions
.box-shadow(@style, @c) {
  box-shadow:         @style @c;
  -webkit-box-shadow: @style @c;
  -moz-box-shadow:    @style @c;
}

.border-radius(@style) {
  border-shadow:         @style;
  -webkit-border-radius: @style;
  -moz-border-radius:    @style;
}

.fixedPosition(@top, @left) {
  position: fixed;
  top: @top;
  left: @left;
}

.btnize (@padding1, @padding2) {
  display: inline-block;
  border: 0;
  background-color: #efefef;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  padding: @padding1 @padding2;

  &:hover {
    border: 2px solid #000000;
    padding: (@padding1 - 2) (@padding2 - 2);
  }
}


// Attributes
.hidden {
  display: none !important;
}

.sm_button {
  float: left;
  min-width: 40px;
  min-height: 40px;
  background: #76799b;
  .border-radius(600px);
  text-align: center;
  vertical-align: middle;
  line-height: 35px;
  margin-right: 10px;
  margin-top: -3px;
  &.sm_plus {

  }
  &.sm_minus {

  }
}

.no_selection {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.centred {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  top: 20%;
  left: 0;
  position: absolute;
}

// Class objects
.wrapper {
  width: 100%;
  height: 100%;
}
.collection {
  float: left;
  margin: 0px 30px 10px 0px;
  text-align: center;

  .preview {
    width: 160px;
    height: 90px;
    background-color: @green;
  }
  .title {
    text-transform: uppercase;
    text-shadow: 0px 1px 1px #ffffff, 0px 1px 1px #666666;
    margin-top: 10px;
    color: #484a63;
    text-decoration: none;
  }
}

.editorElement {
  margin-top: 10%;
}

.btn-block {
}

.btn {
  .btnize(20px, 20px);
}

.dialog {
  width: 40%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
}

// Sub class objects
.row > div {
  &:last-child {
    margin-right: 0 !important;
  }
}
.colorpicker {
  .editorElement;

  // height: 4em;
  height: 64px;
  border: 3px solid #fff;
  /* border-width: 2px 4px 6px 3px; */
  border-width: 6px;
  cursor:pointer;
  .border-radius(10px);
  .box-shadow(0px 2px 0px, #000);
}

.sizemodifier {
  .editorElement;
  clear: both;

  label {
    color: white;
    font-size: 2em;
    text-shadow: 0px 1px 1px #000;
  }
  input {
    border: 0px;
    font-size: 1em;
    float: right;
    width: 30%;
    margin-top: -2%;
    padding: 2%;
    text-align: center;
    color: #333;
    font-family: sans-serif;
  }

  #sm_text {
    width: 96% !important;
    margin-bottom: 30px !important;
  }

}

.btn-editor {
  .btn;
  .editorElement;
  background: #ffff99;

  &.btn-delete {
    background-color: #cc0000;
  }
}

// Identity objects
body {
  font-family: sans-serif;
  background-color: @bodyBackground;
}

#page {
  .btn-block {
    width: 405px;
    margin: 0 auto;
    margin-top: 15%;
    .btn {
      .btnize(20px, 40px);
    }
  }
  .topcentered {
    margin: 20px auto 0;
    width: 90%;
  }
}
#editor {
  .no_selection;
  width: @editorWidth;
  height: 100%;
  background-color: @editorBackground;
  .fixedPosition(0px,0px);

  header {
    margin: 0 10%;
    .colorpicker {
      margin: 30px 0 15px !important;
    }
  }
  section {
    margin: 0 10%;
  }
  footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding-bottom: 10px;

    .btn-editor {
      float: right;
    }
  }
}

#dialog_code {
  .dialog;
  float: left;
  font-family: monospace;
  overflow: scroll;
  font-size: 20px;
  .inner {
    margin: 30px;
  }
}
#dialog_colorpicker {
  .dialog;
  background: #76799b;

  .inner {
    margin: 0 10%;
  }
  .colorpicker {
    float: left;
    margin-top: 5%;
    width: 18%;
    margin-right: 4%;
    height: 50px;
  }
}

#preview {
  margin-left: @editorWidth;
  height: 100%;
  min-height: 600px;
  width: 480px;
  background-color: #fff;
  .box-shadow(10px 0px 20px, rgb(226, 230, 236));
  svg {

  }
}

.globalpreview #preview {
  margin: 0 auto !important;
  .box-shadow(0px 0px 20px, rgb(226, 230, 236));
}

#newpage {
  input {
    border: 2px solid #000;
    padding: 10px;
    font-size: 2em;
  }
}

#elementsNew {
  .editorElement;

  .elementNew {
    margin-top: 5%;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    display: block;
    float: left;
    width: 22%;
    margin-right: 4%;
    padding: 8% 0;
  }
}

#textNew {
  font-size: 62px;
  padding: 1% 0% !important;
  text-align: center;
}

#rectNew {
  .box-shadow(inset 0px 0px 0px 11px, rgb(194, 79, 79));
  background-color: #00ff00;
}

#circleNew {
  .border-radius(60px);
  .box-shadow(inset 0px 0px 0px 11px, rgb(194, 79, 79));
  background-color: #00ff00;
}

// Colors

@green: #62BB11;
@pink: #CE264A;
@yellow: #d9ba00;
@orange: #ea6e26;
@white: #fff;
@gray: #dfdfdf;
@dgray: #999;
@black: #000;
@blue: #3498db;


.colour_bg(@color) {
  background-color: @color !important;
  &:hover {
    border-color: darken(@color, 20%);
  }
}
.colour_txt(@color) {
  color: @color !important;
}

.green_txt {.colour_txt(@green);}
.blue_txt {.colour_txt(@blue);}
.pink_txt {.colour_txt(@pink);}
.yellow_txt {.colour_txt(@yellow);}
.orange_txt {.colour_txt(@orange);}
.white_txt {.colour_txt(@white);}
.gray_txt {.colour_txt(@gray);}
.dgray_txt {.colour_txt(@dgray);}
.black_txt {.colour_txt(@black);}

.green_bg {.colour_bg(@green);}
.blue_bg {.colour_bg(@blue);}
.pink_bg {.colour_bg(@pink);}
.yellow_bg {.colour_bg(@yellow);}
.orange_bg {.colour_bg(@orange);}
.white_bg {.colour_bg(@white);}
.gray_bg {.colour_bg(@gray);}

.dgray_bg {
  .colour_bg(@dgray);
  &:hover {
    border-color: lighten(@dgray, 20%);
  }
}
.black_bg {
  .colour_bg(@black);
  &:hover {
    border-color: lighten(@black, 20%);
  }
}

//@media all and (orientation: portrait) {
/*
@media (max-width : 800px) {
  #editor {
    display: none;
  }
  #preview {
    margin-left: 0;
  }
}
*/